<template>
  <el-dialog
    v-model="visible"
    class="basic-dialog rounded-[10px]"
    :class="[
      showHeader ? '' : 'hidden-header',
      showFooter ? '' : 'hidden-footer'
    ]"
    :title="title"
    :width="width"
    :before-close="handleClose"
    v-bind="$attrs"
    :show-close="showClose"
    :close-on-click-modal="closeOnModal"
    :close-on-press-escape="closeOnEscape"
    @open="emit('open')"
  >
    <template #header>
      <div
        class="text-[14px] text-[#2D2E33] font-semibold"
        v-html="title"
      ></div>
    </template>
    <div
      class="body-wrapper"
      :class="[
        autoHeight ? '' : 'fixedHeight',
        isScroll ? 'overflow-auto max-h-[164px]' : ''
      ]"
    >
      <slot></slot>
    </div>

    <template v-if="showBody" #footer>
      <div v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
      <span v-else class="dialog-footer">
        <el-button
          v-if="showCancelButton"
          :disabled="loading"
          :class="cancelType ? 'text-[#fff]' : 'text-[#666]'"
          :type="cancelType"
          @click="handleClose"
          >{{ cancelText }}
        </el-button>
        <el-button
          v-if="showConfirmButton"
          :loading="props.loading || loading"
          :disabled="confirmDisable"
          :type="type"
          @click="handleConfirm"
          >{{ confirmText
          }}<basic-icon
            v-if="showConfirmIcon"
            :name="confirmIcon"
            color="#fff"
            class="ml-1"
            size="16px"
          ></basic-icon
        ></el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
interface IProps {
  title?: string
  visible: boolean
  type?:
    | ''
    | 'default'
    | 'primary'
    | 'warning'
    | 'text'
    | 'success'
    | 'info'
    | 'danger'
  cancelType?:
    | ''
    | 'default'
    | 'primary'
    | 'warning'
    | 'text'
    | 'success'
    | 'info'
    | 'danger'
  width?: number
  autoHeight?: boolean
  isScroll?: boolean //内容区是否滚动
  confirmText?: string
  cancelText?: string
  showConfirmButton?: boolean
  showCancelButton?: boolean
  showWarningIcon?: boolean
  showConfirmIcon?: boolean
  confirmIcon?: string
  loading?: boolean
  confirmDisable?: boolean
  showHeader?: boolean
  showBody?: boolean
  showFooter?: boolean
  showClose?: boolean
  closeOnModal?: boolean
  closeOnEscape?: boolean
  confirm?: () => void
  cancel?: () => void
}
const props = withDefaults(defineProps<IProps>(), {
  visible: false,
  loading: false,
  confirmDisable: false,
  type: 'primary',
  title: useI18nContent('common.toast.operation_prompt'),
  width: 580,
  autoHeight: true,
  isScroll: false,
  confirmText: useI18nContent('common.button.confirm'),
  cancelText: useI18nContent('common.button.cancel'),
  showCancelButton: true,
  showConfirmButton: true,
  showWarningIcon: false,
  showConfirmIcon: false,
  confirmIcon: 'jump',
  showHeader: true,
  showBody: true,
  showFooter: true,
  isDisabled: true,
  showClose: true,
  closeOnModal: false,
  closeOnEscape: false
})
interface IEmits {
  (event: 'update:visible', value: boolean): void
  (event: 'update:loading', value: boolean): void
  (event: 'update:modelValue', value: boolean): void
  (event: 'closeDialog'): void
  (event: 'close'): void
  (event: 'handleConfirm'): void
  (event: 'confirm'): void
  (event: 'cancel'): void
  (event: 'open'): void
}
const emit = defineEmits<IEmits>()
// 子组件定义自己的visible
const visible = computed({
  get: () => props.visible,
  set: value => {
    emit('update:modelValue', value)
  }
})
// eslint-disable-next-line vue/no-dupe-keys
const loading = ref(false)
// 关闭弹窗
const handleClose = () => {
  // if (props.loading) return
  props.cancel && props.cancel()
  emit('closeDialog')
  emit('close')
  emit('cancel')
  emit('update:visible', false)
  // visible.value = false
}

// 点击确定
const handleConfirm = async () => {
  // if (!props.confirm) {
  //   emit('close')
  //   emit('confirm')
  //   return
  // }
  try {
    loading.value = true
    props.confirm && (await props.confirm())
    emit('handleConfirm')
    emit('confirm')
    emit('update:visible', false)
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.fixedHeight {
  max-height: 56vh;
}
</style>

<style lang="scss">
.hidden-header {
  .el-dialog__header {
    display: none !important;
    font-size: 14px !important;
    margin-right: 0;
    padding: 16px 24px !important;
  }
}

.hidden-footer {
  .el-dialog__footer {
    display: none !important;
  }
}
</style>
